<template>
<div class="rating_page">
  <head-top head-title="搜索" :go-back="true"></head-top>
  <div class="wrapper">
   <!-- <yd-cell-group>
      <yd-cell-item>
        &lt;!&ndash;<input slot="left" type="text" placeholder="请输入商家或美食名称">
        <span slot="right"><yd-icon name="search" size="0.9rem"></yd-icon></span>&ndash;&gt;
        <yd-input slot="left" type="text" v-model="keyword" :showClearIcon="false" :showSuccessIcon="false" :showErrorIcon="false" placeholder="请输入商家或美食名称"></yd-input>
        <span slot="right" class="input-right"><yd-icon name="search" size="0.9rem"></yd-icon></span>
     </yd-cell-item>
    </yd-cell-group>-->
    <yd-cell-group>
      <yd-cell-item>
        <yd-input slot="left" v-model="searchValue" :showClearIcon="false" :showSuccessIcon="false" :showErrorIcon="false"  placeholder="请输入商家或美食名称"></yd-input>
        <span slot="right"><yd-button type="primary" @click.native="searchTarget(searchValue)">确认</yd-button></span>
      </yd-cell-item>
    </yd-cell-group>

    <section v-if="restaurantList.length" class="scroll-container">
      <scroll :data="restaurantList" class="scroll-sub">
        <ul class="list_container">
          <h4 class="title_restaurant header-sj" v-if="restaurantList.length">商家</h4>
          <router-link :to="{path:'/shop', query:{id:item.id}}" tag="li" v-for="item in restaurantList" :key="item.id" class="list_li">
            <section class="item_left">
              <img :src="imgBaseUrl + item.image_path" class="restaurant_img">
            </section>
            <section class="item_right">
              <div class="item_right_text">
                <p>
                  <span>{{item.name}}</span>
                  <i class="fa fa-tag"></i>
                </p>
                <p>月售 {{item.month_sales||item.recent_order_num}} 单</p>
                <p>{{item.delivery_fee||item.float_minimum_order_amount}} 元起送 / 距离{{item.distance}}</p>
              </div>
              <ul class="item_right_detail">
                <li v-for="activities in item.restaurant_activity" :key="activities.id">
                  <span :style="{backgroundColor: '#' + activities.icon_color}" class="activities_icon">{{activities.icon_name}}</span>
                  <span>{{activities.name}}</span>
                  <span class="only_phone">(手机客户端专享)</span>
                </li>
              </ul>
            </section>
          </router-link>
        </ul>
      </scroll>

    </section>
    <section class="search_history" v-if="searchHistory.length&&showHistory">
      <h4 class="title_restaurant">搜索历史</h4>
      <ul>
        <li v-for="(item, index) in searchHistory" :key="index" class="history_list">
          <span class="history_text ellipsis" @click.stop="searchTarget(item)">{{item}}</span>
          <span @click.stop="deleteHistory(index)"><yd-icon name="delete" color="#666a73"></yd-icon></span>

         <!-- <span><i class="fa fa-remove"  @click.stop="deleteHistory(index)"></i></span>-->
        </li>
      </ul>
      <footer class="clear_history" @click="clearAllHistory">清空搜索历史</footer>
      <div class="search_none" v-if="emptyResult">很抱歉！无搜索结果</div>
    </section>
  </div>
  <foot-guide></foot-guide>
</div>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import footGuide from 'src/components/footer/footGuide'
import {searchRestaurant} from '../../service/getData'
import {searchShop} from '../../service/data/search'
import {imgBaseUrl} from 'src/config/env'
import {getStore, setStore} from 'src/config/mUtils'
import scroll from 'components/common/scroll/scroll'
import {mapGetters} from 'vuex'
  export default {
  data(){
  return{
    searchValue:'',
    searchHistory: [], // 搜索历史记录
    restaurantList: [], // 搜索返回的结果
    showHistory: true, // 是否显示历史记录，只有在返回搜索结果后隐藏
    emptyResult: false, // 搜索结果为空时显示
    GEOHASH:'',
    imgBaseUrl
  }
   },
   created(){

   },
   mounted(){
     if(getStore('searchHistory')){
       this.searchHistory = JSON.parse(getStore('searchHistory'));
     }
     this.GEOHASH =  this.$route.params.geohash || this.geohash;
   },
   computed: {
     ...mapGetters([
       'geohash'
     ])
   },
   methods: {
     clearAllHistory(){
       this.searchHistory = [];
       setStore('searchHistory',this.searchHistory);
     },
     deleteHistory(index){
       this.searchHistory.splice(index,1);
       setStore('searchHistory',this.searchHistory);
     },
    async searchTarget(keyWord){
       if(keyWord){
         this.searchValue = keyWord;
       }else if(!keyWord){
         this.$dialog.alert({mes:'请输入关键词'})
         return
       }
     //接口有问题
    /*  this.restaurantList = await searchRestaurant( this.GEOHASH, this.searchValue);*/
       this.restaurantList = searchShop;
       this.showHistory = this.restaurantList.length ? false:true;
      this.emptyResult = !this.restaurantList.length;
      /**
       * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
       * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
       */
      let history = getStore('searchHistory');
      if(history){
        let checkrepeat = false;
        this.searchHistory = JSON.parse(history);
        this.searchHistory.forEach((item)=>{
          if(item===this.searchValue){
            checkrepeat = true;
          }
        })
        //没有重复
        if(!checkrepeat){
          this.searchHistory.push(this.searchValue)
        }
      }else {
        //没有搜索记录
        this.searchHistory.push(this.searchValue)
      }
      setStore('searchHistory',this.searchHistory)
    }
   },
   components:{
     scroll,
     footGuide,
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../style/mixin';
.search_page{
  margin-bottom: 2rem;
}
.wrapper{
  display: flex;
  flex-direction: column;
  left: 0;
  height: 100%;
  padding-bottom: 2rem;
  overflow: hidden;
  .scroll-container{
    display: flex;
    flex: 1;
  }
  .scroll-sub{
    width:100%;
  }
}
.header-sj{
  display: block;
  width: 100%;
}
.search_form{
  background-color: #fff;
  padding: 0.5rem;
  display: flex;
  input{
    height: 1.5rem;
  }
  .search_input{
    flex: 4;
    border: 0.025rem solid $bc;
    @include sc(0.65rem, #333);
    border-radius: 0.125rem;
    background-color: #f2f2f2;
    font-weight: bold;
    padding: 0 0.25rem;
  }
  .search_submit{
    flex: 1;
    border: 0.025rem solid $blue;
    margin-left: .2rem;
    @include sc(0.65rem, #fff);
    border-radius: 0.125rem;
    background-color: $blue;
    font-weight: bold;
    padding: 0 0.25rem;
  }
}
.title_restaurant{
  font-size: 0.6rem;
  line-height: 2rem;
  text-indent: 0.5rem;
  font-weight: bold;
  color: #666;
}
.list_container{
  background-color: #fff;
}
.list_li{
  display: flex;
  justify-content: 'center';
  padding: 0.5rem;
  border-bottom: 0.025rem solid $bc;
  .item_left{
    margin-right: 0.25rem;
    .restaurant_img{
      @include wh(1.7rem, 1.7rem);
    }
  }
  .item_right{
    font-size: 0.55rem;
    flex: 1;
    .item_right_text{
      padding-bottom: 0.25rem;
      p{
        line-height: .9rem;
      }
      .pay_icon{
        margin-bottom: -0.08rem;
      }
      .fa{
        color: $icon;
      }
    }
    .item_right_detail{
      margin-top: 0.25rem;
      li{
        font-size: 0;
        span{
          font-size: .5rem;
          vertical-align: middle;
          display: inline-block;
          margin-bottom: 0.2rem;
        }
        .activities_icon{
          @include sc(.5rem, #fff);
          font-weight: bold;
          padding: .04rem;
          border-radius: 0.15rem;
          margin-right: 0.125rem;
        }
        .only_phone{
          color: #FF6000;
        }
      }
    }
  }
}
.search_history{
  .history_list{
    background-color: #fff;
    border-bottom: 0.025rem solid $bc;
    @include font(0.7rem, 2rem);
    padding: 0 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .history_text{
      display: inline-block;
      width: 80%;
    }
    .fa{
     color:$icon;
      font-size: .8rem;
    }
  }
  .clear_history{
    background-color: #fff;
    color: $blue;
    @include font(.7rem, 2rem);
    font-weight: bold;
    text-align: center;
  }
}
.search_none{
  margin: 0 auto;
  @include font(0.65rem, 1.75rem);
  color: #333;
  background-color: #fff;
  text-align: center;
  margin-top: 0.125rem;
}
</style>
